<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="任务审核"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />
    <div style="margin: 5px;">
      <van-cell title="所属月份" required v-model="date" @click="onDisplay" is-link />
    </div>

    <van-popup v-model="dateshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy"
        @cancel="oncancel"
      />
    </van-popup>

    <div class="box">
      <div class="rownr">
        <div class="shuxian"></div>
        <div class="quyu">{{deptname}}</div>

        <div class="mubiao">
          <div class="columnr">
            <div style="font-size: 16px;color: red;text-align: center;">{{mbtask}}万</div>
            <div style="font-size: 12px;color: #B2B2B2;text-align: center;">任务额</div>
          </div>
          <div class="fenge">

          </div>
          <div class="columnr">
            <div style="font-size: 16px;color: blue;text-align: center;">{{ybtask}}万</div>
            <div style="font-size: 12px;color: #B2B2B2;text-align: center" >已报</div>
          </div>
        </div>
      </div>

     <div class="yuangong">
        <div class="rownr">
          <div style="font-size: 14px;padding-left: 20px;padding-top: 10px;width: 25%;padding-bottom: 10px;text-align: center;font-weight: bold;">1-8号</div>
          <div style="font-size: 14px;padding-left: 20px;padding-top: 10px;width: 25%;padding-bottom: 10px;text-align: center;font-weight: bold;">9-15号</div>
          <div style="font-size: 14px;padding-left: 10px;padding-top: 10px;width: 25%;padding-bottom: 10px;text-align: center;font-weight: bold;">16-23号</div>
          <div style="font-size: 14px;padding-left: 10px;padding-top: 10px;width: 25%;padding-bottom: 10px;text-align: center;font-weight: bold;" >24号以后</div>
        </div>
       <div class="rownr">
         <div style="font-size: 12px;padding-left: 20px;padding-top: 5px;width: 25%;padding-bottom: 10px;text-align: center;display: flex;flex-direction: column">
           <div style="color: red">
             目标： {{mbFirstTaskNum}}
           </div>
           <div style="color: blue">
             已报：{{ybFirstTaskNum}}
           </div>
         </div>
         <div style="font-size: 12px;padding-left: 20px;padding-top: 5px;width: 25%;padding-bottom: 10px;text-align: center;display: flex;flex-direction: column">
           <div style="color: red">
             目标： {{mbSecondTaskNum}}
           </div>
           <div style="color: blue">
             已报：{{ybSecondTaskNum}}
           </div>
         </div>
         <div style="font-size: 12px;padding-left: 10px;padding-top: 5px;width: 25%;padding-bottom: 10px;text-align: center;display: flex;flex-direction: column">
           <div style="color: red">
             目标： {{mbThirdTaskNum}}
           </div>
           <div style="color: blue">
             已报：{{ybThirdTaskNum}}
           </div>
         </div>
         <div style="font-size: 12px;padding-left: 10px;padding-top: 5px;width: 25%;padding-bottom: 10px;text-align: center;display: flex;flex-direction: column" >
           <div style="color: red">
             目标： {{mbFourthTaskNum}}
           </div>
           <div style="color: blue">
             已报：{{ybFourthTaskNum}}
           </div>
         </div>
       </div>
      </div>
      <div class="yuangong" v-for="item in busiTaskList " :key="item.taskid"  >
        <div class="rownr" >
          <div style="font-size: 14px;padding-left: 20px;padding-top: 10px;padding-bottom: 10px;text-align: center;">{{item.index}}.</div>
          <div style="font-size: 14px;padding-top: 10px;padding-left:10px;padding-bottom: 10px;text-align: center;">{{item.ywyname}} > </div>
          <div style="font-size: 14px;padding-left:10px;padding-top: 10px;color: blue">{{item.tasknum}}元</div>
          <div style="font-size: 14px;padding-left: 10px;padding-bottom: 10px;display: flex;flex-direction: row;text-align: center;padding-top: 5px;position: absolute;right: 20px;" >
            <div style="padding-right: 10px;">
              <van-button plain type="primary" size="small" @click="onModify(item)" v-if="item.qrbz != '1'" round>修改</van-button>
            </div>
            <div>
              <van-button plain type="info" size="small" @click="onConfirmTask(item)" v-if="item.qrbz != '1' " round>确定</van-button>
              <div style="padding-top: 10px;text-align: center;">
                <van-tag type="success"  v-if="item.qrbz == '1' " size="large">已确定</van-tag>
              </div>
            </div>
          </div>
        </div>
        <div class="rownr">
          <div style="padding-left: 30px;color: #B2B2B2;font-size: 10px;">1   -    8号：<label style="color: black">{{item.firstTaskNum}}元</label></div>
          <div style="padding-left: 35px;color: #B2B2B2;font-size: 10px;">9 - 15号：<label style="color: black">{{item.secondTaskNum}}元</label></div>

        </div>
        <div class="rownr">
          <div style="padding-left: 30px;padding-top:10px;color: #B2B2B2;font-size: 10px;">16 - 23号：<label style="color: black">{{item.thirdTaskNum}}元</label></div>
          <div style="padding-left: 20px;padding-top:10px;color: #B2B2B2;font-size: 10px;">24号以后：<label style="color: black">{{item.fourthTaskNum}}元</label></div>
        </div>

      </div>
    </div>

    <van-dialog v-model="tkshow" title="修改任务额度" show-cancel-button @confirm="onConfirmTk" @cancel="onCancelTk">

      <van-field
        v-model="newFirstTaskNum"
        label="1-8号业绩目标(元):"
        label-width	="50%"
        placeholder="请输入金额(元)"
        type="digit"
        required
        @input="onChangeTaskNum1"
      />
      <van-field
        v-model="newSecondTaskNum"
        label="9-15号业绩目标(元):"
        placeholder="请输入金额(元)"
        type="digit"
        required
        label-width	="50%"
        @input="onChangeTaskNum2"
      />
      <van-field
        v-model="newThirdTaskNum"
        label="16-23号业绩目标(元):"
        placeholder="请输入金额(元)"
        type="digit"
        required
        label-width	="50%"
        @input="onChangeTaskNum3"
      />
      <van-field
        v-model="newFourthTaskNum"
        label="24号至月底业绩目标(元):"
        placeholder="请输入金额(元)"
        type="digit"
        required
        label-width	="50%"
        @input="onChangeTaskNum4"
      />

      <van-cell-group>
        <van-field
          v-model="newtasknum"
          label="总目标额（元）"
          placeholder="任务额(元)"
          type="digit"
          disabled="true"
        />
      </van-cell-group>
    </van-dialog>

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { addAchievements, queryUserInfo, queryDeptBusiTask, updateBusitask } from '../../api/api'

export default {
  name: 'Tasklist',
  data() {
    return {
      date: '',
      show: false,
      kjflag: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: '',
      ywyname: '',
      deptid: '',
      deptname: '',
      currentDate: new Date(),
      postList: [],
      mbtask: 0,
      ybtask: 0,
      busiTaskList: [],
      tkshow: false,
      newtasknum: '',
      newywyname: '',
      newtaskid: '',
      newFirstTaskNum: '',
      newSecondTaskNum: '',
      newThirdTaskNum: '',
      newFourthTaskNum: '',
      mbFirstTaskNum: '',
      mbSecondTaskNum: '',
      mbThirdTaskNum: '',
      mbFourthTaskNum: '',
      ybFirstTaskNum: '',
      ybSecondTaskNum: '',
      ybThirdTaskNum: '',
      ybFourthTaskNum: ''
    }
  },

  created() {
    var dateNow = new Date()
    var year = dateNow.getFullYear() + ''
    var month = (dateNow.getMonth() + 1) + ''
    var date = year + (month < 10 ? '0' : '') + month

    this.date = date
    this.ywyname = this.$store.getters.userName
    this.queryUserInfo()
    this.queryDeptBusiTask()
  },
  mounted() {

  },

  methods: {

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    showFblx() {
      this.show = true
    },

    showDklx() {
      if (!this.ywlx) {
        Dialog.alert({
          title: '',
          message: '先选择业务类型'
        })
        return
      }
      this.dklxshow = true
    },

    onSelectfblx(item) {
      console.log(item)
      this.ywlxname = item.name
      this.ywlx = item.id
      this.show = false
      this.dkactions = []
      this.dklxname = ''
      this.dklx = ''

      if (item) {
        if (item.id == '1') {
          this.getDicts('sqey_yfx_dklx').then(response => {
            const dklx = response.data
            const actionArray = []
            if (dklx) {
              for (var i = 0; i < dklx.length; i++) {
                const temp = { name: dklx[i].dictLabel, id: dklx[i].dictValue }
                actionArray.push(temp)
              }
            }
            this.dkactions = actionArray
          })
        } else
        if (item.id == '2') {
          this.getDicts('sqey_dgj_dklx').then(response => {
            const dklx = response.data
            const actionArray = []
            if (dklx) {
              for (var i = 0; i < dklx.length; i++) {
                const temp = { name: dklx[i].dictLabel, id: dklx[i].dictValue }
                actionArray.push(temp)
              }
            }
            this.dkactions = actionArray
          })
        } else {
          const actions = [{ name: '无', id: '1' }]
          this.dkactions = actions
        }
      }
    },

    onSelectDklx(item) {
      this.dklxname = item.name
      this.dklx = item.id
      this.dklxshow = false
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择缴费日期')
        return
      }
      if (!this.ywlx) {
        Toast.fail('请选择业务类型')
        return
      }
      if (!this.dklx) {
        Toast.fail('请选择端口类型')
        return
      }
      if (!this.zje) {
        Toast.fail('请填写总金额')
        return
      }

      const param = { ktdate: this.date, ywlx: this.ywlx, dklx: this.dklx, zje: this.zje }
      addAchievements(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '提交成功'
          }).then(() => {
            // on close
            this.$router.go(-1) // 返回上一层
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },
    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
        } else {
          Toast.fail(response.msg)
        }
      })
    },
    // 查询用户部门任务额和每个人的任务额
    queryDeptBusiTask() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      param.ssyf = this.date
      console.log(param)
      queryDeptBusiTask(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.busiTaskList = []
          this.ybtask = 0
          this.mbtask = 0
          if (response.data) {
            if (response.data.tasknum) {
              this.mbtask = floatDiv(response.data.tasknum, 10000).toFixed(2)
              this.mbFirstTaskNum = response.data.firstTaskNum
              this.mbSecondTaskNum = response.data.secondTaskNum
              this.mbThirdTaskNum = response.data.thirdTaskNum
              this.mbFourthTaskNum = response.data.fourthTaskNum
            }
            const busiTaskList = response.data.busitaskList
            let ybtask = 0
            let ybFirstTaskNum = 0
            let ybSecondTaskNum = 0
            let ybThirdTaskNum = 0
            let ybFourthTaskNum = 0
            if (busiTaskList.length > 0) {
              for (var i = 0; i < busiTaskList.length; i++) {
                ybtask = floatAdd(ybtask, parseFloat(busiTaskList[i].tasknum))
                ybFirstTaskNum = floatAdd(ybFirstTaskNum, parseFloat(busiTaskList[i].firstTaskNum))
                ybSecondTaskNum = floatAdd(ybSecondTaskNum, parseFloat(busiTaskList[i].secondTaskNum))
                ybThirdTaskNum = floatAdd(ybThirdTaskNum, parseFloat(busiTaskList[i].thirdTaskNum))
                ybFourthTaskNum = floatAdd(ybFourthTaskNum, parseFloat(busiTaskList[i].fourthTaskNum))
                busiTaskList[i].index = i + 1
              }
            }
            this.ybtask = floatDiv(ybtask, 10000).toFixed(2)
            this.ybFirstTaskNum = ybFirstTaskNum
            this.ybSecondTaskNum = ybSecondTaskNum
            this.ybThirdTaskNum = ybThirdTaskNum
            this.ybFourthTaskNum = ybFourthTaskNum
            this.busiTaskList = busiTaskList
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    oncancel() {
      this.dateshow = false
    },
    onConfirmNy(event) {
      console.log(event)
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.date = date
      this.dateshow = false
      this.queryDeptBusiTask()
    },

    onConfirmTask(item) {
      console.log(item)

      const taskid = item.taskid
      const param = {}
      param.taskid = taskid
      param.qrbz = '1'
      updateBusitask(param).then(response => {
        if (response.code === 200) {
          Toast.success('修改成功')
          this.queryDeptBusiTask()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onModify(item) {
      this.newtasknum = ''
      this.tkshow = true
      this.newFirstTaskNum = item.firstTaskNum
      this.newSecondTaskNum = item.secondTaskNum
      this.newThirdTaskNum = item.thirdTaskNum
      this.newFourthTaskNum = item.fourthTaskNum
      this.newtasknum = item.tasknum
      this.newywyname = item.ywyname
      this.newtaskid = item.taskid
      console.log(item)
    },

    onChangeTaskNum1(value) {
      let zje = 0
      // let firstTaskNum = this.firstTaskNum
      const newSecondTaskNum = parseFloat(this.newSecondTaskNum)
      const newThirdTaskNum = parseFloat(this.newThirdTaskNum)
      const newFourthTaskNum = parseFloat(this.newFourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(newSecondTaskNum, newThirdTaskNum), newFourthTaskNum))
      this.newtasknum = zje
    },

    onChangeTaskNum2(value) {
      let zje = 0
      const newFirstTaskNum = this.newFirstTaskNum
      // let newSecondTaskNum = parseFloat(this.newSecondTaskNum)
      const newThirdTaskNum = parseFloat(this.newThirdTaskNum)
      const newFourthTaskNum = parseFloat(this.newFourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(newFirstTaskNum, newThirdTaskNum), newFourthTaskNum))
      this.newtasknum = zje
    },

    onChangeTaskNum3(value) {
      let zje = 0
      const newFirstTaskNum = this.newFirstTaskNum
      const newSecondTaskNum = parseFloat(this.newSecondTaskNum)
      // let newThirdTaskNum = parseFloat(this.newThirdTaskNum)
      const newFourthTaskNum = parseFloat(this.newFourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(newFirstTaskNum, newSecondTaskNum), newFourthTaskNum))
      this.newtasknum = zje
    },

    onChangeTaskNum4(value) {
      let zje = 0
      const newFirstTaskNum = this.newFirstTaskNum
      const newSecondTaskNum = parseFloat(this.newSecondTaskNum)
      const newThirdTaskNum = parseFloat(this.newThirdTaskNum)
      // let newFourthTaskNum = parseFloat(this.newFourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(newFirstTaskNum, newSecondTaskNum), newThirdTaskNum))
      this.newtasknum = zje
    },

    onConfirmTk() {
      const param = {}
      param.tasknum = this.newtasknum
      param.taskid = this.newtaskid
      param.firstTaskNum = this.newFirstTaskNum
      param.secondTaskNum = this.newSecondTaskNum
      param.thirdTaskNum = this.newThirdTaskNum
      param.fourthTaskNum = this.newFourthTaskNum
      updateBusitask(param).then(response => {
        if (response.code === 200) {
          Toast.success('修改成功')
          this.queryDeptBusiTask()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onCancelTk() {
      this.tkshow = false
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: #F0F4FE;
  }

  .navclass{
    background-color:#ffffff;
  }

  .box{
    background-color: #ffffff;
    margin:5px;
    padding-left: 10px;
    width: 95%;
    border-radius: 10px;
    height: auto;
  }

  .shuxian{
    width: 5px;
    height: 25px;
    line-height:50px;
    text-align: center;
    background: blue;
    position: relative;
    margin-left: 10px;
    margin-top: 20px;
    border-radius: 5px;
  }

  .mubiao{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    right: 20px;
    padding-left: 30%;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
  }

  .quyu{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .fenge{
    width: 1px;
    height: 40px;
    line-height:20px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
  }

  .yuangong{
    padding-bottom: 10px;
    margin: 10px;
    width: 95%;
    height: auto;
    background-color: #F8FBFD;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    border-radius: 10px;
  }
</style>
